<template>
  <el-container>
    <el-aside class="aside" width="auto">
      <custom-aside/>
    </el-aside>
    <el-container class="main" :class="{'fixed-header': opened}">
      <el-header height="50px">
        <custom-header/>
      </el-header>
      <el-main>
        <router-view v-slot="{ Component }">
          <transition>
            <!--            <keep-alive>-->
            <component :is="Component"/>
            <!--            </keep-alive>-->
          </transition>
        </router-view>
      </el-main>
      <!--      <el-footer>-->
      <!--        <custom-footer/>-->
      <!--      </el-footer>-->
    </el-container>
  </el-container>
</template>

<script>
import CustomHeader from "./Header.vue";
import CustomFooter from "./Footer.vue";
import CustomAside from "./Aside.vue";
import store from "../store";

export default {
  name: "Layout",
  components: {
    CustomHeader,
    CustomFooter,
    CustomAside
  },
  computed: {
    opened() {
      return !store.getters.getAsideStatus
    }
  }
};
</script>

<style scoped>
.el-header, .el-footer, .el-main {
  padding: 0!important;
}
.aside {
  position: fixed;
  height: 100%;
  background: #f0f0f0;
}
/*隐藏滚动条*/
.aside::-webkit-scrollbar{
  display:none;
}
.main {
  min-height: 100%;
  position: relative;
  margin-left: 210px;
  -webkit-transition: margin-left 0.28s;
  transition: margin-left 0.28s;
  -webkit-transition: width 0.28s;
  transition: width 0.28s;
  width: calc(100% - 210px);
}
.fixed-header {
  top: 0;
  right: 0;
  z-index: 9;
  transition: width 0.28s;
}
.main.fixed-header {
  -webkit-transition: margin-left 0.28s;
  transition: margin-left 0.28s;
  -webkit-transition: width 0.28s;
  transition: width 0.28s;
  margin-left: 64px;
  width: calc(100% - 64px);
}
</style>
